<template>
    <div>
        <div class="container">
            <div>账户余额：{{parentBalance}}元</div><br>
            <div v-show="isSubAccount==0">子帐户：</div>
            <div v-show="isSubAccount==0" v-for="(item, index) in account" :key="index" style="margin-bottom: 20px;"><span style="margin-right: 30px;">{{item.userName}}：{{item.subBalance}}元</span><el-button class="filter-item" @click="switchTo(item.userName)" type="primary">转入</el-button><el-button class="filter-item" @click="rollOut(item.userName)" type="primary">转出</el-button></div>
        </div>
        <el-dialog title="转入" :visible.sync="Visibleadd">
            <el-form :model="form">
                <el-form-item label="子账户" :label-width="formLabelWidth">
                    <span>{{subAccount}}</span>
                </el-form-item>
                <el-form-item label="转入金额" :label-width="formLabelWidth">
                    <el-input v-model="form.amount" placeholder="请输入转入金额" autocomplete="off"  style="width:300px;"></el-input>
                </el-form-item>
                
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn1()">确 定</el-button>
                <div slot="tip" class="el-upload__tip" style="float: left">注：从账户余额转入到子帐户。</div>
            </div>
            
        </el-dialog>
        <el-dialog title="转出" :visible.sync="Visible">
            <el-form :model="form">
                <el-form-item label="子账户" :label-width="formLabelWidth">
                    <span>{{subAccount}}</span>
                </el-form-item>
                <el-form-item label="转出金额" :label-width="formLabelWidth">
                    <el-input v-model="form.amount" placeholder="请输入转出金额" autocomplete="off"  style="width:300px;"></el-input>
                </el-form-item>
                
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="btn2()">确 定</el-button>
                <div slot="tip" class="el-upload__tip" style="float: left">注：从子帐户转出到账户余额。</div>
            </div>
            
        </el-dialog>
        <div class="filter-container">
            <div class="version">子帐户转入与转出记录</div>
        </div>
        <el-table :data="list" border fit highlight-current-row style="width: 80%;">
            
            <el-table-column align="center" label="时间">
                <template slot-scope="scope">
                <span>{{scope.row.jysj}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="账户">
                <template slot-scope="scope">
                <span>{{scope.row.cuser}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                <span>{{scope.row.jylx}}</span>
                </template>
            </el-table-column>
            
            <el-table-column align="center" label="金额/元">
                <template slot-scope="scope">
                <span v-if="scope.row.zjlx==0" style="color:green">+{{scope.row.jyje}}</span>
                <span v-if="scope.row.zjlx==1" style="color: red">-{{scope.row.jyje}}</span>
                </template>
            </el-table-column>
            
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.currentPage" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      account: '',
      subAccount:'',
      isSubAccount: JSON.parse(localStorage.getItem("userInfo")).isSubAccount,
      listQuery: {
          userId:JSON.parse(localStorage.getItem("userInfo")).userId,
        currentPage: 1,
        pageSize: 10,
      },
      Visibleadd: false,
      Visible: false,
      parentBalance: '0',
      formLabelWidth: '120px',
      form: {
        amount: ''
      },
    }
  },
  created() {
    this.getAccount()
    this.getList()
  },
  methods: {
    getList(){
      var that = this
      that.$post({
            api: "/account/getBalanceList",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("getBalanceList",data)
        });
    },
    getAccount(){
      var that = this
      that.$post({
            api: "/account/getAccountBalance",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.account = data.data
            that.parentBalance = data.data[0].parentBalance || '0'
        }
        console.log("getAccountBalance",data)
        });
    },
    switchTo(text){
        this.Visibleadd = true
        this.subAccount = text
        this.form.amount = ''
    },
    btn1(){
        var that = this
          that.$post({
            api: "/account/accountCapital",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                subAccount: that.subAccount, 
                amount: that.form.amount,
                istosub: 0
            }
            }).then(({ data }) => {
                if(data.code === 0){
                    that.Visibleadd = false
                    that.getAccount()
                    that.getList()
                    that.$notify({
                        title: '成功',
                        message: '已提交申请',
                        type: 'success',
                        duration: 2000
                    })
                }else{
                    this.$alert(data.msg, '提示', {
                    dangerouslyUseHTMLString: true
                    });
                }    
                console.log("accountCapital",data)
            });
    },
    rollOut(text){
        this.Visible = true
        this.subAccount = text
        this.form.amount = ''
    },
    btn2(){
        var that = this
          that.$post({
            api: "/account/accountCapital",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                subAccount: that.subAccount, 
                amount: that.form.amount,
                istosub: 1
            }
            }).then(({ data }) => {
                if(data.code === 0){
                    that.Visible = false
                    that.getAccount()
                    that.getList()
                    that.$notify({
                        title: '成功',
                        message: '已提交申请',
                        type: 'success',
                        duration: 2000
                    })
                }
                else{
                    this.$alert(data.msg, '提示', {
                    dangerouslyUseHTMLString: true
                    });
                }    
                console.log("accountCapital",data)
            });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
     
    },
    handleRemove(row) {
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
    line-height: 40px;
}
.version{
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-indent: 20px;
  font-weight: 550;
  border-left: 4px #2277ff solid;
  margin-top: 30px;
  margin-bottom: 30px;
}
.pagination-container{
    float: left;
}
</style>

